<template>

  <van-popup v-model="showCover" :close-on-click-overlay=false style="background-color: transparent;">
    <div class="backView">
      <p class="tipLabel">身份验证</p>
      <input class="input" maxlength=4
             autocomplete
             autofocus
             placeholder="请输入姓名"
             v-model="name"
      />

      <input class="input" maxlength=18
             autocomplete
             v-model="idCode"
             placeholder="请输入身份证号码"
      />

      <div class="btnView">
        <p class="cancelBtn" @click="cancelClick">取消</p>
        <p class="confirmBtn" @click="confirmClick">保存</p>
      </div>

    </div>
  </van-popup>

</template>

<script>

  import planDetail from '../planDetail'
//  import Vue from 'vue'
  import {Popup, Toast} from 'vant'
  Vue.use(Popup);

  export default {
    name: 'IdentityCover',
    data() {
      return {
        showCover: false,
        name: "",
        idCode: "",
      }
    },
    model: {
      prop: 'showStatus',
      event: 'changeStatus'
    },

    props: ['showStatus'],
    watch: {
      showStatus: {
        handler: function(val, oldval) {
          this.showCover = val
        },
        immediate: true
      },
      showCover() {
        this.$emit('changeStatus', this.showCover)
      },
    },

    methods: {
      cancelClick() {
        this.showCover = false
      },
      confirmClick() {
        if (this.name.length == 0 || (this.idCode.length != 15 && this.idCode.length != 18)) {
          Toast("请输入正确的身份证号码和姓名")
        } else  {
          planDetail.bindIDCard(this.name, this.idCode, () => {
            this.showCover = false
          })
        }

        // this.showCover = false

        //提交资料

      }
    }

  }
</script>

<style scoped>
  .backView {
    width: 300px;
    border-radius: 8px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px;
    box-sizing: border-box;
  }
  .tipLabel {
    font-family: PingFangSC-Regular;
    font-size: 16px;
    font-weight: bold;
    color: #333333;
    text-align: center;

  }
  .input {
    margin-top: 16px;
    width: 100%;
    border-radius: 4px;
    padding: 16px;
    font-size: 16px;
    background-color: #F7F7F7;
    box-sizing: border-box;
  }
  .btnView {
    margin-top: 24px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
  .cancelBtn {
    font-size: 14px;
    color: #333333;
  }
  .confirmBtn {
    margin-left: 40px;
    font-size: 14px;
    color: #1DA1F2;
  }
</style>
